<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/normalize.css" />
    <title>首页</title>
    <style>
      * {
        box-sizing: border-box;
      }

      body {
        min-width: 1080px;
      }
      .header {
        width: 1080px;
        height: 100px;
        margin: 0 auto;
        display: flex;
      }
      .header_logo {
        text-align: center;
        padding: 26px 0 16px;
      }
      .header_logo img {
        width: 80px;
      }
      .header_list {
        flex: 1;
        margin-left: 50px;
      }
      .header_list a {
        color: #000;
        font-size: 16px;
        text-decoration: none;
        display: inline-block;
        padding: 0 20px;
        line-height: 95px;
        cursor: pointer;
      }

      .header_list a:hover {
        border-bottom: solid 5px #d00;
      }

      .main_banner img {
        width: 100%;
      }

      .main_item {
        width: 100%;
        position: relative;
      }

      .main_item > img {
        height: 724px;
      }
      .main_item .main_item_list {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
      }
      .main_item .main_item_item {
        flex: 1;
        background: #000;
        line-height: 0;
      }
      .main_item .main_item_item img {
        height: 578px;
        cursor: pointer;
      }
      .main_item .main_item_item img:hover {
        opacity: 0.75;
      }
      .main_item_a {
        background: #e7e7e7;
        text-align: center;
        padding: 100px 0;
      }
      .main_item_a p {
        margin-bottom: 60px;
        font-size: 36px;
      }
      .main_item_a img {
        transition: all 0.5s ease-out;
      }
      .main_item_a img:hover {
        transform: scale(1.1);
      }
      .main_item_btn {
        width: 150px;
        line-height: 40px;
        display: inline-block;
        background: #1b1b1b;
        color: #e5dfd9;
        cursor: pointer;
      }
      .main_item_btn:hover {
        opacity: 0.75;
      }
      .main_item_b {
        background: #e7e7e7;
        text-align: center;
        padding-bottom: 100px;
      }
      .main_item_b_img {
        width: 60%;
        margin-left: 20%;
        position: relative;
      }
      .main_item_b img {
        width: 100%;
      }
      .main_item_b_text_l {
        padding: 50px 20px;
        text-align: center;
        width: 180px;
        position: absolute;
        bottom: 250px;
        left: 80px;
        background: #fff;
        font-size: 13px;
      }

      .main_item_b_text_r {
        padding: 50px 20px;
        text-align: center;
        width: 180px;
        position: absolute;
        top: 80px;
        right: 80px;
        background: #fff;
        font-size: 13px;
      }
      .main_item_b_text_l img,
      .main_item_b_text_r img {
        width: 135px;
        height: 135px;
        border-radius: 50%;
      }
      .main_item_b_text_l span,
      .main_item_b_text_r span {
        display: block;
        color: #666;
        margin-bottom: 20px;
        font-size: 12px;
      }
      .main_item_b_text_l div,
      .main_item_b_text_r div {
        cursor: pointer;
      }
      .main_item_c {
        width: 100%;
        height: 600px;
        background: url(./images/index-banner3.jpg) no-repeat 0 0;
        background-size: 100% auto;
        position: relative;
      }

      .main_item_c_text {
        background: #fff;
        width: 160px;
        padding: 30px 20px;
        font-size: 14px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
      }
      .main_item_c_text p {
        color: #333;
        line-height: 1;
      }
      .main_item_c_text p:first-child {
        font-size: 18px;
      }
      .main_item_c_text span {
        color: #666;
        display: block;
        font-size: 12px;
        margin: 30px 0;
      }
      .main_item_c_text div {
        cursor: pointer;
      }
      .main_item_d {
        background: #e7e7e7;
        padding: 50px 0;
        text-align: center;
      }
      .main_item_d h1 {
        text-align: center;
        margin-bottom: 80px;
      }
      .main_item_d_list {
        width: 70%;
        margin-left: 15%;
        overflow: hidden;
      }
      .main_item_d_item {
        width: 50%;
        float: left;
        text-align: center;
        margin-bottom: 50px;
        cursor: pointer;
        transition: all 0.5s ease-out;
      }
      .main_item_d_item:hover {
        transform: scale(1.1);
      }

      .main_item_d_item img {
        width: 80%;
      }
      .main_item_d_item p {
        font-size: 16px;
        color: #666;
      }
      .main_item_d_item div {
        font-size: 12px;
      }
      .main_item_d_item div:hover {
        color: #666;
      }
      .footer {
        background: #1b1b1b;
        line-height: 100px;
        text-align: center;
        color: #fff;
        font-size: 12px;
      }
    </style>
  </head>

  <body>
    <!-- 页面头部导航栏 -->
    <header class="header">
      <div class="header_logo">
        <img src="./images/logo-anta-r-02.svg" alt="" />
      </div>
      <div class="header_list">
        <a href="./index.html">首页</a>
        <a href="./introduce.html">品牌文化</a>
        <a href="./contact.html">联系我们</a>
      </div>
    </header>
    <!-- 页面主体 -->
    <main class="main">
      <div class="main_banner">
        <img src="./images/index-banner.jpg" alt="" srcset="" />
      </div>

      <div class="main_item">
        <img src="./images/index-banner1.jpg" alt="" srcset="" />
        <div class="main_item_list">
          <div class="main_item_item">
            <img src="./images/item1.jpg" alt="" srcset="" />
          </div>
          <div class="main_item_item">
            <img src="./images/item2.jpg" alt="" srcset="" />
          </div>
          <div class="main_item_item">
            <img src="./images/item3.jpg" alt="" srcset="" />
          </div>
          <div class="main_item_item">
            <img src="./images/item4.jpg" alt="" srcset="" />
          </div>
        </div>
      </div>
      <div class="main_item_a">
        <img src="./images/index1.jpg" alt="" srcset="" />
        <p>星标系列梭织休闲长裤</p>
        <div class="main_item_btn">立即购买</div>
      </div>
      <div class="main_item_b">
        <div class="main_item_b_img">
          <img src="./images/index-banner2.png" alt="" srcset="" />
          <div class="main_item_b_text_l">
            <img src="./images/index-icon2.png" alt="" />
            <p>外套</p>
            <span>因为生而不息，永不止步</span>
            <div>更多 ></div>
          </div>
          <div class="main_item_b_text_r">
            <img src="./images/index-icon1.png" alt="" />
            <p>上衣&衬衫</p>
            <span>助力冬奥，支持国家队</span>
            <div>更多 ></div>
          </div>
        </div>
        <p>安踏助力2020北京冬奥会</p>
        <div class="main_item_btn">立即购买</div>
      </div>
      <div class="main_item_c"></div>
      <div class="main_item_d">
        <div class="main_item_d_list">
          <div class="main_item_d_item">
            <img src="./images/index5.png" alt="" />
            <p>创1.0跑鞋</p>
            <div>震感降维 稳着陆 ></div>
          </div>
          <div class="main_item_d_item">
            <img src="./images/index6.png" alt="" />
            <p>虫洞科技跑鞋</p>
            <div>矫健如羚 ></div>
          </div>
          <div class="main_item_d_item">
            <img src="./images/index7.png" alt="" />
            <p>氢跑系列跑鞋</p>
            <div>轻无旁骛 放肆开跑 ></div>
          </div>
          <div class="main_item_d_item">
            <img src="./images/index8.png" alt="" />
            <p>MIX裂变休闲鞋</p>
            <div>打造厚底运动风潮 ></div>
          </div>
        </div>
        <div class="main_item_btn">欣赏更多</div>
      </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">版权 @ 安踏官网 - by 小可爱</footer>
  </body>
</html>
